<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.4.1.min.js"></script>
</head>
<body>
<div>
    <input type="text" id="filePath" placeholder="查询路径">
    <button onclick="searchFilePath()">查询</button>
</div>
<div>
    <form action="/upload" method="post" enctype="multipart/form-data">
        <input type="file" name="file" id="file">
        <input type="text" name="directPath" placeholder="目标路径">
        <input type="submit" value="上传">
    </form>
</div>
<div>
    <input type="text" id="filePathName" placeholder="文件路径">
    <button onclick="fileDownload()">下载</button>
</div>

<div>
    <table>
        <th>文件名</th>
        <th>文件路径</th>
        <th>选择</th>
        <tbody id="files">

        </tbody>
<!--        <tr>-->
<!--            <td id="checkFileName">选中的内容</td>-->
<!--            <td id="checkFilePath">另一部分内容</td>-->
<!--            <td><input name="checkFile" type="checkbox" onclick="onCheckOne(this)"></td>-->
<!--        </tr>-->
    </table>
</div>

<script>

    //通过this获取当前点击的控件对象
    function checkOne(ck){
        //清楚所有选择状态，再将上述的this进行选中，保证每次选中的只有一个
        $("input[id='checkFile']").prop("checked",false);
        $(ck).prop("checked",true);
    }

    //查询目标路径
    function searchFilePath() {
        var filePath=$("#filePath").val();
        $.post("/testGetFiles",{"filePath":filePath},function(data){
            var html="";
            for(var i=0;i<data.length;i++){
                html+="<tr>";
                html+="<td id=\"checkFileName\">"+data[i].fileName+"</td>";
                html+="<td id=\"checkFilePath\">"+data[i].filePath+"</td>";
                html+="<td><input id=\"checkFile\" type=\"checkbox\" onclick=\"checkOne(this)\"></td>";
                html+="<tr>";
            }
            $("#files").html(html);
        })
    }

    //下载目标文件
    function fileDownload() {
        //var filePathName=$("#filePathName").val();
        var check=$("input[id='checkFile']:checked");//选中的复选框
        var filePathName=null;
        check.each(function(){
           var row=$(this).parent("td").parent("tr");
           filePathName=row.find("[id='checkFilePath']").html();
        });
        var s=filePathName.replace(/\\/g,'/');
        window.location.href="/downLoadFile?filePathName="+s+"";
    }
</script>

</body>
</html>
